import { useState, useEffect } from 'react';

interface ResponsiveValue<T> {
  value: T;
  type: 'mobile' | 'tablet' | 'desktop';
}

interface Options<T> {
  mobile: T;
  tablet: T;
  desktop: T;
}

export function useResponsiveValue<T>(options: Options<T>): ResponsiveValue<T> {
  const getType = () => {
    const width = window.innerWidth;
    if (width < 768) return 'mobile';
    if (width < 1200) return 'tablet';
    return 'desktop';
  };

  const [type, setType] = useState<'mobile' | 'tablet' | 'desktop'>(getType());

  useEffect(() => {
    const handleResize = () => {
      setType(getType());
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return {
    value: options[type],
    type,
  };
}